<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
	</head>
		<style type="text/css">
			body{
				padding:20px;
				background: url(img/bjt.jpg) no-repeat;
				background-position: center;
	            background-size: cover;
	            width: 100%;
	            height: 100%;
			}
			li{
				list-style: none;
			}
			#tabbar{
				padding:20px;
			}
			.leff{
            font-size: 18px;
            font-weight: 700px;
            color:#cc9956;
            margin-right: 10px;
            
        	}  
        	.first{
        	border-radius: 5px;
        	background: #2a2245;
            font-size: 22px;
            padding:10px 0;
            color:white;
            text-align: center;
            font-weight: 700px;
            margin-top:15px;
        	}
        	.topnum{
        		margin-top:30px;
        		
        	}
        	.topnum .leff{
        		color:#347772;
        	}
        	.images{
        		text-align: center;
        	}
        	img{
        		width:50px;
        		height: 50px;
        		border-radius: 100px;
        	} 
        	.button{
        		display: inline-block;
        	}
        	.rig{
        		float: right;
        	}
		</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="button" onclick="getImage()"><i class="mui-icon mui-icon-camera"></i></div>
			<h1 class="mui-title">简历</h1>
			<div  class="button rig" onclick="galleryImgs()"><i class="mui-icon mui-icon-image"></i></div>
		</header>
		
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar" id="me">
				<span class="mui-icon mui-icon-contact" id="me"></span>
				<span class="mui-tab-label">我</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat" id="work">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">工作</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact" id="skill">
				<span class="mui-icon mui-icon-camera"></span>
				<span class="mui-tab-label">技能</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map" id="project">
				<span class="mui-icon mui-icon-list"></span>
				<span class="mui-tab-label">项目</span>
			</a>
		</nav>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="background: none;">
			<div class="mui-scroll">
		
				<div id="tabbar" class="mui-control-content mui-active">
					
				</div>
				<div id="tabbar-with-chat" class="mui-control-content">
					
				</div>
				<div id="tabbar-with-contact" class="mui-control-content">
					
				</div>
				<div id="tabbar-with-map" class="mui-control-content">
					
				</div>	
			
			</div>
			
			
		</div>
		<div id="output">

		</div>
		<script type="text/javascript" src="js/immersed.js" ></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			function pulldownRefresh() {
				setTimeout(function() {

					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 200);
			}

			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //参数为true代表没有更多数据了。
				
				}, 200);
			}


function getImage(){
	outSet('开始拍照：');
	var cmr = plus.camera.getCamera();
	cmr.captureImage(function(p){
		outLine('成功：'+p);
		plus.io.resolveLocalFileSystemURL(p, function(entry){
			createItem(entry);
		}, function(e){
			outLine('读取拍照文件错误：'+e.message);
		});
	}, function(e){
		outLine('失败：'+e.message);
	}, {filename:'_doc/camera/',index:1});
}


function galleryImgs(){
	// 从相册中选择图片
	outSet("从相册中选择多张图片:");
    plus.gallery.pick( function(e){
    	for(var i in e.files){
	    	outLine(e.files[i]);
    	}
    }, function ( e ) {
    	outSet( "取消选择图片" );
    },{filter:"image",multiple:true,system:false});
}





var footerBtn=$('.mui-tab-item');

	mui.ajax("http://www.ljwap.online/www/api/me.php",{
	dataType:'json',//服务器返回json格式数据
	type:'get',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},	              
	success:function(data){
                    var html = "";
                    for(var i=0;i<data.length;i++){
                        html +="<li><p class='first animated fadeInDown'><span>"+data[i].title+"</span></p><p class='images'><img src='img/img5.jpg'></p><p><span class='leff'>姓名:</span><span class='animated fadeInDown'>"+data[i].name+"</span></p><p><span class='leff'>年龄:</span><span class='animated fadeInLeft'>"+data[i].age+"</span></p><p><span class='leff'>出生年月:</span><span>"+data[i].born+ 
                        "</span></p><p><span class='leff'>电话:</span><span>"+data[i].phone+"</span></p><p><span class='leff'>院校:</span><span>"+data[i].school+"</span></p><p><span class='leff'>专业:</span><span>"+data[i].education+"</span></p><p><span class='leff'>自我介绍:</span><span>"+data[i].introduce+
                        "</span></p></li>";
                    }
                    $("#tabbar").html(html);
	}

})
mui.ajax("http://www.ljwap.online/www/api/work.php",{
	dataType:'json',//服务器返回json格式数据
	type:'get',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},
	success:function(data){
                    var html = "";
                    for(var i=0;i<data.length;i++){
                        html +="<li><p class='topnum'><span class='leff'>公司性质:</span>"+data[i].category+"</p><p><span class='leff'>公司名称:</span>"+data[i].name+"</p><p><span class='leff'>公司官网:</span>"+data[i].url+"</p><p><span class='leff'>工作时间:</span>"+data[i].time+ 
                        "</p><p><span class='leff'>任职岗位:</span>"+data[i].posts+ "</p><p><span class='leff'>员工数:　</span>"+data[i].peoples+ "</p><p><span class='leff'>项目:　</span>"+data[i].projects+
                        "</p></li>";
                        
                    }
                    $("#tabbar-with-chat").html(html);
	}
})

	mui.ajax("http://www.ljwap.online/www/api/project.php",{
	dataType:'json',//服务器返回json格式数据
	type:'get',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},	              
	success:function(data){
                    var html = "";
                    for(var i=0;i<data.length;i++){
                         html +="<li><p class='topnum'><span class='leff'>项目类型:</span>"+data[i].category+"</p><p><span class='leff'>项目名称:</span>"+data[i].name+"</p><p><span class='leff'>项目网站:</span>"+data[i].url+"</p><p><span class='leff'>项目描述:</span>"+data[i].description+ 
                        "</p><p><span class='leff'>项目详情:</span>"+data[i].detail+ "</p><p><span class='leff'>项目技术:</span>"+data[i].tech+ 
                        "</p></li>";
                    }
                    $("#tabbar-with-map").html(html);
	}

})
	
	
	mui.ajax("http://www.ljwap.online/www/api/skill.php",{
	dataType:'json',//服务器返回json格式数据
	type:'get',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},	              
	success:function(data){
                    var html = "";
                    for(var i=0;i<data.length;i++){
                        html +="<li><p class='first animated tada'>"+data[i].category+"</p><p><span class='leff'>名称:</span>"+data[i].name+"</p><p><span class='leff'>时间:</span>"+data[i].time+"</p><p><span class='leff'>技术水平:</span>"+data[i].level+ 
                       
                        "</p></li>";
                    }
                    $("#tabbar-with-contact").html(html);
	}

})

		</script>
	</body>

</html>